CSS Combinators Guide

Simple examples of selector combinators

Adjacent Sibling Combinator (+)

Selects an element that is immediately after another:

.element + .element
Child 1
Child 2
Sibling 1
Sibling 2 (styled)
Sibling 3 (styled)

Styles elements that immediately follow another element.

General Sibling Combinator (~)

Selects all siblings that come after an element:

.element ~ .element
Child 1
Sibling 1 (styled)
Other element
Sibling 2 (styled)

Styles all matching siblings that come after the first element.

Child Combinator (>)

Selects direct children of an element:

.parent > .child
Direct Child (styled)
Direct Child (styled)
Nested Child (not styled)

Only styles direct children, not nested ones.

With Pseudo-classes

Combinators work with pseudo-classes:

.parent:hover > .child
First Child
Second Child
Third Child

Hover over the parent to see child elements change.